<template>
	<view class="Ranking">
		<view class="Ranking_top">
			- TOP榜根据平台销量/浏览/收藏等指标综合计算 -
		</view>
		<view class="Ranking_item" v-for="i in hotSaleGoods" :key="i.goods_id" @click="toUrl(i.goods_id)">
			<image :src="i.cover||'/pagesA/static/微信图片_20201124091755.png'" ></image>
			<view class="item_content">
				<view class="content_title">{{i.name}}</view>
				<view class="price">￥{{i.price}}</view>
				<view class="buttom">加入购物车</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="gwpp" >
				<view class="topic flex_r_center">
					<!-- <view class="cllor" @click="closePopup">取消</view> -->
				</view>
				<view class="dd flex_r_between">
					<view class="ddImg">
						<image style="width: 140rpx;height: 140rpx;" :src="data.images[0]||'/pagesA/static/微信图片_20201124091755.png'" mode=""></image>
					</view>
					<view style="width: 490rpx;">
						<view class="tterb">{{data.name}}</view>
						<view class="jg"><span class="s">￥</span>{{data.options[redchang].price}}</view>
						<view class="yfkc">库存 {{data.options[redchang].stock}}</view>
					</view>
				</view>
				<view class="ggBox">
					<view class="gg">
						规格
					</view>
					<view class="flex_r_start_wrap">
						<view class="item" v-for="(v,i) in data.options" :key="v" @click="changeitem(i)" :class="redchang==i?'item1':''">
							{{v.name}}
						</view>
					</view>
				</view>

				<view class="ggBox">
					<view class="gg">
						数量
					</view>
					<view class="flex_r_start height">
						<view class="add_sub item_sub" :class="{bor_CBCCCD:goods_num<=1}" @click="goods_num--">-</view>
						<view class="add_sub item_value"><input disabled type="text" v-model="goods_num" /></view>
						<view class="add_sub item_add" :class="{ bor_CBCCCC: goods_num >= data.options[redchang].stock }" @click="goods_num++">+</view>
					</view>
				</view>
				<view class="ggBox" @click="radioAll">
					<view class="gg1">
					<view class="radio" :class="radioA?1:'radioActive'" >
					</view>
					<text>同时加入收藏</text>
					</view>
				</view>
				<view class="flex_r_between">
					<view class="addCart bgc_DB1B22" @click="addCart">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSaleGoods:[],
				data:[],
				goods_num:1,
				redchang:0,
				radioA: false,
			};
		},
		watch:{
			goods_num: function(val, oldVal) {
				if (val < 1) {
					this.goods_num = 1
				}
				if(val>this.data.options[0].stock){
					this.goods_num=this.data.options[0].stock
				}
				
			},
		},
		onShow() {
			this.$request('/app/goods/hotSaleGoods', 'post', {
			}).then(res => {
				this.hotSaleGoods=res.content;
				console.log(res)
			});
		},
		methods:{
			radioAll() {
				this.radioA = !this.radioA
			},
			changeitem(e){
				this.redchang=e
				console.log(this.redchang)
			},
			ew(e){
				this.popup1=e.show
			},
			closePopup(){
				this.$refs.popup.close()
			},
			addCart(){ // 加入购物车
				// if(!this.redchang){
				// 	uni.showToast({
				// 		title:'请选择产品',
				// 		duration:2000,
				// 		icon:'none'
				// 	})
				// 	return
				// }
				// if(this.radioAll){
				// 	this.$request('/app/goods/goodsCollection','post',{
				// 		access_token: uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
				// 		goods_id:this.data.goods_id,
				// 	}).then(res=>{
				// 		if(res.errcode==99){
				// 			uni.navigateTo({
				// 				url:'/pages/login/login'
				// 			})
				// 		}
				// 	})
				// }
				this.$request('/app/cart/addcart','post',{
					access_token: uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
					goods_id:this.data.goods_id,
					quantity:this.goods_num,
					option_id:this.data.options[this.redchang].id,
					is_collect:this.radioA?'1':'0'
				}).then(res=>{
					uni.showToast({
						title:res.message
					})
					this.$refs.popup.close()
				})
			},
			ToUrl(){
				if(!this.redchang){
					uni.showToast({
						title:'请选择产品',
						duration:2000,
						icon:'none'
					})
					return
				}
				let arr2 = []
						let obj = {}
						obj.quantity = this.goods_num,
						obj.cart_id = this.dataList.cart_id,
						obj.goods_id = this.dataList.goods_info.goods_id,
						obj.option_id = this.goods_specs_id,
						obj.is_collect = this.dataList.goods_info.is_collection,
						arr2.push(obj)
				let Arr1 = JSON.stringify(arr2)
				this.$request('/app/cart/settlement','post',{
					access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
					type:'1',
					t:3,
					data:Arr1
				}).then(res=>{
					if  (res.errcode==99){
					uni.showModal({
					    title: '提示',
					    content: res.message,
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					}else if(res.errcode==0){
					uni.setStorage({
					    key: 'content',
					    data: JSON.stringify(res.content),
					    success: function () {
					    }
					});
					uni.navigateTo({
						url:"/pagesA/ConfirmOrder/ConfirmOrder"
					})
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			toUrl(e){
				this.$request('/app/goods/getGoodsDetail','post',{
					access_token: JSON.parse(uni.getStorageSync('access_token')),
					goods_id: e,
				}).then(res=>{
					console.log(res)
					if(res.errcode==0){
						let num=0
						// this.options[1].info=res.content.length
						this.data=res.content
					}
				})
				this.$refs.popup.open()
				// uni.setStorage({
				// 	key: 'goods_id',
				// 	data: JSON.stringify(e),
				// 	success: function() {}
				// });
				// uni.navigateTo({
				// 	url:'/pagesA/CommodityDetails/CommodityDetails'
				// })
			}
		}
	}
</script>

<style lang="less">
	@import url("@/static/css/flex.css");
	.Ranking{
		height: 100%;
		background: linear-gradient(180deg, #DE4044 0%, #C82F37 100%);
		padding: 30rpx 20rpx;
		overflow-x: scroll;
		.gg1{
			display: flex;
		}
		.radio {
			width: 40rpx;
			height: 40rpx;
			background: url(@/static/selected%20active.png) 4rpx 4rpx no-repeat;
			background-size: 32rpx 32rpx;
		}
		
		.radioActive {
			background: url(@/static/selected／on.png) 4rpx 4rpx no-repeat;
			background-size: 32rpx 32rpx;
		}
		.gwpp {
			width: 710rpx;
			height: auto;
			margin: auto;
			background: #FFFFFF;
			border-radius: 5px;
			padding: 0 30rpx 40rpx;
			box-sizing: border-box;

			.topic {
				padding: 22rpx 0;
				position: relative;
				.cllor {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #DB1B22;
					position: absolute;
					left: 0;
				}

				.topText {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;

				}

			}
			.dd{
				margin: 30rpx 0;
				.ddImg{
					width: 140rpx;
					height: 140rpx;
					background: #D8D8D8;
					border-radius: 10rpx;
					overflow: hidden;
				}
				.tterb{
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					overflow: hidden;
				}
				.jg{
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #DB1B22;
					margin: 16rpx 0;
					.s{
						font-size: 24rpx;
					}
				}
				.yfkc{
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
			.ggBox{
				padding: 10rpx 0;
				box-sizing: border-box;
				.gg{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 20rpx;
				}
				.item{
					width: auto;
					height: 60rpx;
					padding: 0 20rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #333333;
					line-height: 60rpx;
					margin-top: 10rpx;
					margin-right: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

				}
				.item1{
					color: #DB1B22;
border: 1px solid #DB1B22;
				}
				.item2{
					color: #CCCCCC;
border: 1px solid #CCCCCC;
				}
				.add_sub{
					width: 90rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 0rpx;
					border: 1px solid #333333;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					text-align: center;
				}
				.item_sub{
					border-right: none;
				}
				.bor_CBCCCD {
					border-top: 1px solid #cbcccd;
					border-bottom: 1px solid #cbcccd;
					border-left: 1px solid #cbcccd;
				}
				.bor_CBCCCC {
					border-top: 1px solid #cbcccd;
					border-bottom: 1px solid #cbcccd;
					border-right: 1px solid #cbcccd;
				}
				.item_value{
					min-width: 120rpx;
					input{
						height: 100%;
					}
				}
				.item_add{
					border-left: none;
				}
			}
			.addCart{
				width: 100%;
				height: 70rpx;
				background: #CA9756;
				border-radius: 36rpx;
				font-size:30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: center;
				margin-top: 40rpx;
			}
			.bgc_DB1B22{
				background-color: #DB1B22;
			}
		}
		.Ranking_top{
			height: 56rpx;
			background: linear-gradient(180deg, #FFE4AF 0%, #FD9E58 100%);
			border-radius: 14px;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #DD3F43;
			line-height: 56rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.Ranking_item{
			margin-bottom: 20rpx;
			display: flex;
			background-color: #fff;
			border-radius: 10rpx;
			image{
				width: 230rpx;
				height: 230rpx;
				border-radius: 5px 0 0 5px;
			}
			.item_content{
				flex: 1;
				position: relative;
				padding: 20rpx;
				    display: flex;
				    justify-content: space-between;
				    flex-direction: column;
				.content_title{
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					overflow: hidden;
				}
				.price{
					font-size: 24rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #DB1B22;
				}
				.buttom{
					position: absolute;
					bottom: 14rpx;
					right: 20rpx;
					padding: 4rpx 16rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					background: #DB1B22;
					border-radius: 12px;
				}
			}
		}
	}
</style>
